<template>
  <div>
    <el-table
      :data="tutors"
      stripe 
      style="margin: 20px auto;"
    >
      <el-table-column label="ID" prop="id"/>
      <el-table-column label="姓名" prop="name"/>
      <el-table-column label="职称" prop="title"/>
      <el-table-column label="照片" prop="photo"/> 
      <el-table-column label="简介" prop="introduction"/>
      <el-table-column label="邮箱" prop="email"/>
      <el-table-column label="电话" prop="phone"/>
      <el-table-column label="是否有招生资格" prop="eligibility"/>
      <el-table-column align="right" label="操作" width="200px">
        <template #default="scope">
          <el-button 
            size="small" 
            @click="handleEdit(scope.$index, scope.row)"
          >
            编辑
          </el-button>
          <!-- <el-button 
            size="small" 
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

	<!-- 编辑页面 -->
	<el-dialog
		title="编辑导师信息"
		v-model="edit_dialog_visible"
		width="30%"
	>
		<el-form
			ref="editFormRef"
			:model="form"
			status-icon
			label-width="120px"
			class="demo-ruleForm"
		>
			<el-form-item label="姓名">
				<el-input v-model="form.name" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="职称" prop="title">
				<el-input v-model="form.title" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="照片" prop="photo">
				<el-input v-model="form.photo" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="简历" prop="introduction">
				<el-input v-model="form.introduction" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
				<el-input v-model="form.email" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="电话" prop="phone">
				<el-input v-model="form.phone" autocomplete="off"/>
			</el-form-item>
			<el-form-item v-if = "counter.role_id == 8" label="是否有招生资格" prop="eligibility">
				<el-input v-model="form.eligibility" autocomplete="off"/>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitEditForm(editFormRef)">提交</el-button>
				<el-button @click="resetForm(editFormRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
  </div>
</template>

<script setup>
import {RouterView,RouterLink} from 'vue-router'
import { onMounted, reactive, ref } from 'vue';
import axios from 'axios';
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
const tutors = ref([])
const getTutors = () =>{
  const token = sessionStorage.getItem('token')
  axios.get("http://127.0.0.1:5000/tutors", {
      headers: {
          Authorization: `Bearer ${token}`
      }
  }).then(res => {
      console.log(res);
      tutors.value = res.data
	  console.log('1', tutors.value);
	  
  })
}

const getTutor = () =>{
  const token = sessionStorage.getItem('token')
  axios.get(`http://127.0.0.1:5000/tutors/${counter.user_id}`, {
      headers: {
          Authorization: `Bearer ${token}`
      }
  }).then(res => {
      console.log(res);
      tutors.value = res.data
	  console.log('1', tutors.value);
  })
}

onMounted(() => {
	if(counter.role_id == 8) {
		getTutors()
    }
    else {
        getTutor()
		
    }
})

// 编辑表单
let edit_dialog_visible = ref(false)
const handleEdit = (index, row) => {
	for(let key in row) {
		form[key] = row[key]
	}
	edit_dialog_visible.value = true
}

const editFormRef = ref()
const form = reactive({
	id: "",
	name: "",
	title: "",
	photo: "",
	introduction: "",
	email: "",
	phone: "",
	eligibility:''
})

const submitEditForm = (formEl) => {
	const token = sessionStorage.getItem('token')
	axios.put(`http://localhost:5000/tutors/${form.id}`, form, {
		headers: {
			Authorization: `Bearer ${token}`
		}
	}).then((res) => {
		formEl.resetFields()
		edit_dialog_visible.value = false
		if(counter.role_id == 8) {
			getTutors()
		}
		else {
			getTutor()
		}
	})
}

// 重置表单
const resetForm = (formEl) => {
	formEl.resetFields()
}

</script>

<style scoped>

</style>
